<script setup>
defineProps({
  formFields: {
    type: Array
  }
})
</script>

<template>
<div v-for="(field, index) in formFields" :key="index">
  <div>
      <template v-if="field.require">
        <span style="color: red">*</span>
      </template>
      <label :for="field.id">{{ field.id }} {{  field.label }}
      </label>
      <p v-if="field.memo">{{ field.memo }}</p>
      <template v-if="field.type === 'text'">
        <input :id="field.id" :type="field.textDataType" :placeholder="field.placeholder" v-model="field.textValue">
      </template>

      <template v-else-if="field.type === 'radio'">
        <div v-for="(value, i) in field.arrayValueSet" :key="i">
          <input type="radio" :name="field.id" :value="value" v-model="field.selectedValue"> {{ value }}
        </div>
      </template>

      <template v-else-if="field.type === 'checkout'">
        <div v-for="(value, i) in field.arrayValueSet" :key="i">
          <input type="checkbox" :value="value" v-model="field.selectedValues"> {{ value }}
        </div>
      </template>

      <template v-else-if="field.type === 'selectList'">
        <select v-model="field.selectedValue">
          <option v-for="(value, i) in field.arrayValueSet" :key="i" :value="value">{{ value }}</option>
        </select>
      </template>
    </div>
  </div>
</template>

<style scoped>

</style>
